<template>
  <div class="overture">
    <div class="head">
      <h2 class="title">大学生就业指导系统</h2>
      <div class="user" @click="clickUser">用户:{{ username }}</div>
    </div>
    <div class="body">
      <div v-if="!loginStatus" class="content">
        <div class="img-box">
          <div class="img"></div>
          <div class="img-text">欢迎大学生就业指导系统</div>
        </div>
      </div>
      <div v-if="loginStatus" class="content">
        <div class="tool">
          <el-button v-if="role==='企业'&&interfaceType===0" type="primary" @click="send">发布</el-button>
          <el-button v-if="role==='企业'&&interfaceType===1" type="primary" @click="back">返回</el-button>
          <el-input style="margin-left: 10px;" v-model="seacherValue" :placeholder="seacherPla" @input="input"/>
        </div>
        <el-table v-if="interfaceType===0" :data="tableDataTemp" style="width: 100%">
          <el-table-column fixed prop="id" label="编号" width="120" />
          <el-table-column prop="company_name" label="公司名称" width="120" />
          <el-table-column prop="job_title" label="职位" width="120" />
          <el-table-column prop="salary" label="薪资" width="120" />
          <el-table-column prop="education" label="学历" width="120" />
          <el-table-column prop="address" label="地址" width="300" />
          <el-table-column prop="number_of_recruits" label="招聘人数" width="120" />
          <el-table-column prop="publish_time" label="发布时间" width="200" />
          <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="scope">
              <el-button v-if="role==='企业'" link  size="small" @click="vieJob(scope.row)">查看简历</el-button>
              <el-button  v-if="role==='学生'" link  size="small" @click="sendResume(scope.row)">投递简历</el-button>
              <el-button v-if="role==='企业'" link type="danger" size="small" @click="delJob(scope.row)">删除</el-button>
              <el-button  v-if="role==='企业'" link type="warning" size="small" @click="modJob(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="interfaceType===1" :data="resumeTableDataTemp" style="width: 100%">
          <el-table-column fixed prop="id" label="编号" width="120" />

          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="gender" label="性别" width="120" />
          <el-table-column prop="birth_date" label="出生日期" width="120" />
          <el-table-column prop="nationality" label="民族" width="120" />
          <el-table-column prop="place_of_origin" label="籍贯" width="120" />
          <el-table-column prop="age" label="年龄" width="120" />
          <el-table-column prop="contact" label="联系方式" width="120" />
        
          <el-table-column prop="email" label="邮箱" width="120" />
          <el-table-column prop="political_status" label="政治面貌" width="120" />
          <el-table-column prop="current_residence" label="现居" width="120" />
          <el-table-column prop="marital_status" label="婚姻状况" width="120" />
          <el-table-column prop="graduation_school" label="毕业学校" width="120" />
          <el-table-column prop="profession" label="专业" width="120" />
          <el-table-column prop="job_intention" label="求职意向" width="120" />

          <el-table-column prop="graduation_time" label="毕业时间" width="120" />
          <el-table-column prop="highest_education" label="最高学历" width="120" />
          <el-table-column prop="education_experience" label="教育经历" width="120" />
          <el-table-column prop="work_experience" label="工作经历" width="120" />
          <el-table-column prop="certificate_skills" label="证书技能" width="120" />
          <el-table-column prop="self_evaluation" label="自我评价" width="120" />
          <el-table-column prop="hobbies_and_talents" label="爱好特长" width="120" />

          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link  size="small" @click="vieResume(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="tips"
      width="500"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item  v-if="btnStatus===0||btnStatus===2" label="账号">
              <el-input placeholder="请输入帐号" v-model="form.useraccount" />
            </el-form-item>
            <el-form-item  v-if="btnStatus===0||btnStatus===2" label="密码">
              <el-input placeholder="请输入密码" v-model="form.userpassword" type="password"/>
            </el-form-item>
            <el-form-item  v-if="btnStatus===2" label="权限">
              <el-select
                v-model="form.userRole"
                placeholder="请选择权限"
                style="width: 240px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item  v-if="btnStatus===1" label="权限">
              {{ role }}
            </el-form-item>
          </el-form>
          <el-button v-if="btnStatus===0" @click="register">注册</el-button>
          <el-button v-if="btnStatus===0" type="primary" @click="login">登陆</el-button>
          <el-button v-if="btnStatus===1" type="primary" @click="out">注销</el-button>
          <el-button v-if="btnStatus===2"  @click="celReg">取消</el-button>
          <el-button v-if="btnStatus===2" type="primary" @click="derReg">确定</el-button>
        </div>
      </template>
    </el-dialog>
    
    <el-dialog
      v-model="newDialogVisible"
      :title="newTips"
      width="1000"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-form :model="newForm" label-width="auto" style="max-width: 600px">
            <el-form-item v-if="newDStatus!==1"  label="企业">
              <el-input v-model="newForm.company_name"  placeholder="请输入企业"/>
            </el-form-item>
            <el-form-item v-if="newDStatus!==1"  label="职位">
              <el-input v-model="newForm.job_title" placeholder="请输入职位"/>
            </el-form-item>
            <el-form-item v-if="newDStatus!==1"  label="薪资">
              <el-input v-model="newForm.salary"  placeholder="请输入薪资"/>
            </el-form-item>
            <el-form-item v-if="newDStatus!==1"  label="学历">
              <el-input v-model="newForm.education"  placeholder="请输入学历"/>
            </el-form-item>
            <el-form-item v-if="newDStatus!==1"  label="地址">
              <el-input v-model="newForm.address"  placeholder="请输入地址"/>
            </el-form-item>
            <el-form-item v-if="newDStatus!==1"  label="招聘人数">
              <el-input v-model="newForm.number_of_recruits"  placeholder="请输入招聘人数"/>
            </el-form-item>
            <el-form-item v-if="newDStatus===1"  label="标题">
              {{ newForm.news_title }}
            </el-form-item>
            <el-form-item v-if="newDStatus===1"  label="内容">
              {{ newForm.news_content }}
            </el-form-item>
          </el-form>
          <el-button v-if="newDStatus===0" @click="cerSendJob">取消</el-button>
          <el-button v-if="newDStatus===0" type="primary" @click="derSendJob">确定</el-button>
          <el-button v-if="newDStatus===1||newDStatus===2" @click="close">关闭</el-button>
          <el-button v-if="newDStatus===2" type="primary" @click="derModJob">修改</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="resumediaBtn"
      title="简历"
      width="1000"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-form :model="resumeForm" label-width="auto" style="max-width: 600px">
            <el-form-item  label="姓名">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.name"  placeholder="请输入姓名"/>
              <span v-else>{{ resumeForm.name }}</span>
            </el-form-item>
            <el-form-item  label="性别">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.gender"  placeholder="请输入性别"/>
              <span v-else>{{ resumeForm.gender }}</span>
            </el-form-item>
            <el-form-item  label="出生日期">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.birth_date"  placeholder="请输入出生日期"/>
              <span v-else>{{ resumeForm.birth_date }}</span>
            </el-form-item>
            <el-form-item  label="民族">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.nationality"  placeholder="请输入民族"/>
              <span v-else>{{ resumeForm.nationality }}</span>
            </el-form-item>

            <el-form-item  label="籍贯">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.place_of_origin"  placeholder="请输入籍贯"/>
              <span v-else>{{ resumeForm.place_of_origin }}</span>
            </el-form-item>
            <el-form-item  label="年龄">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.age"  placeholder="请输入年龄"/>
              <span v-else>{{ resumeForm.age }}</span>
            </el-form-item>
            <el-form-item  label="联系方式">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.contact"  placeholder="请输入联系方式"/>
              <span v-else>{{ resumeForm.contact }}</span>
            </el-form-item>
            <el-form-item  label="邮箱">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.email"  placeholder="请输入邮箱"/>
              <span v-else>{{ resumeForm.email }}</span>
            </el-form-item>

            <el-form-item  label="政治面貌">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.political_status"  placeholder="请输入政治面貌"/>
              <span v-else>{{ resumeForm.political_status }}</span>
            </el-form-item>
            <el-form-item  label="现居">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.current_residence"  placeholder="请输入现居"/>
              <span v-else>{{ resumeForm.current_residence }}</span>
            </el-form-item>
            <el-form-item  label="婚姻状况">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.marital_status"  placeholder="请输入婚姻状况"/>
              <span v-else>{{ resumeForm.marital_status }}</span>
            </el-form-item>
            <el-form-item  label="毕业学校">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.graduation_school"  placeholder="请输入毕业学校"/>
              <span v-else>{{ resumeForm.graduation_school }}</span>
            </el-form-item>

            <el-form-item  label="专业">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.profession"  placeholder="请输入专业"/>
              <span v-else>{{ resumeForm.profession }}</span>
            </el-form-item>
            <el-form-item  label="求职意向">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.job_intention"  placeholder="请输入求职意向"/>
              <span v-else>{{ resumeForm.job_intention }}</span>
            </el-form-item>
            <el-form-item  label="毕业时间">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.graduation_time"  placeholder="请输入毕业时间"/>
              <span v-else>{{ resumeForm.graduation_time }}</span>
            </el-form-item>
            <el-form-item  label="最高学历">
              <el-input v-if="resumeFormStatus===0" v-model="resumeForm.highest_education"  placeholder="请输入最高学历"/>
              <span v-else>{{ resumeForm.highest_education }}</span>
            </el-form-item>

            <el-form-item  label="教育经历">
              <el-input v-if="resumeFormStatus===0" type="textarea" v-model="resumeForm.education_experience"  placeholder="请输入教育经历"/>
              <span v-else>{{ resumeForm.education_experience }}</span>
            </el-form-item>
            <el-form-item  label="工作经历">
              <el-input v-if="resumeFormStatus===0" type="textarea" v-model="resumeForm.work_experience"  placeholder="请输入工作经历"/>
              <span v-else>{{ resumeForm.work_experience }}</span>
            </el-form-item>
            <el-form-item  label="证书技能">
              <el-input v-if="resumeFormStatus===0" type="textarea" v-model="resumeForm.certificate_skills"  placeholder="请输入证书技能"/>
              <span v-else>{{ resumeForm.certificate_skills }}</span>
            </el-form-item>
            <el-form-item  label="自我评价">
              <el-input v-if="resumeFormStatus===0" type="textarea" v-model="resumeForm.self_evaluation"  placeholder="请输入自我评价"/>
              <span v-else>{{ resumeForm.self_evaluation }}</span>
            </el-form-item>
            <el-form-item  label="爱好特长">
              <el-input v-if="resumeFormStatus===0" type="textarea" v-model="resumeForm.hobbies_and_talents"  placeholder="请输入爱好特长"/>
              <span v-else>{{ resumeForm.hobbies_and_talents }}</span>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="derSendResume">投递</el-button>
          <el-button @click="resumediaBtn=false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import axios from 'axios';
import { ElNotification } from 'element-plus'

const resumediaBtn=ref(false)
const seacherPla=ref('请输入招聘信息编号')
const btnStatus=ref(0)
const tips=ref('登陆')
const username=ref('未登陆')
const dialogVisible = ref(false)
const form=ref({
  useraccount:'',
  userpassword:'',
  userRole:''
})
const resumeTableDataTemp=ref([])
const resumeForm=ref({})
const resumeFormStatus=ref(0)
const resumeTableData=ref([])
const role=ref('')
const tableData = ref([])
const tableDataTemp = ref([])
const interfaceType=ref(0)
const newDStatus=ref(0)
const newDialogVisible=ref(false)
const newTips=ref('招聘内容')
const newForm=ref({})
const seacherValue=ref()
const options=ref([{
  value:'企业',
  label:'企业'
},{
  value:'学生',
  label:'学生'
}
])
const nowJobId=ref()
const loginStatus=ref(false)

const derSendResume=()=>{
  resumeForm.value.job_id=nowJobId
  axios.post('http://localhost:3000/resumes',resumeForm.value).then((res)=>{
    ElNotification({
      title: '投递简历成功',
      type: 'success',
    })
    resumediaBtn.value=false
    resumeForm.value={}
    getJobs()
  }).catch((err) => {
    ElNotification({
      title: '投递简历失败',
      type: 'warning',
    })
  })
}
const vieResume=(data)=>{
  resumeFormStatus.value=1
  resumediaBtn.value=true
  resumeForm.value=data
}
const sendResume=(data)=>{
  resumediaBtn.value=true
  resumeFormStatus.value=0
  nowJobId.value=data.id
  resumeForm.value={}
}
const input=()=>{
  if(seacherValue.value===''){
    tableDataTemp.value=tableData.value
    resumeTableDataTemp.value=resumeTableData.value
  }else{
    tableDataTemp.value=tableData.value.filter(item=>{
      return item.id==seacherValue.value
    })
    resumeTableDataTemp.value=resumeTableData.value.filter(item=>{
      return item.id==seacherValue.value
    })
  }
}
const close=()=>{
  newDStatus.value=0
  newDialogVisible.value=false
  newForm.value={}
  getJobs()
}
const getJobs=()=>{
  axios.get('http://localhost:3000/jobs').then((res)=>{
    // ElNotification({
    //   title: '获取招聘数据成功',
    //   type: 'success',
    // })
    tableData.value=res.data.results
    tableData.value.forEach(item=>{
      const date = new Date(item.publish_time);
      // 转换Date对象为指定的格式
      const formattedTime = date.toLocaleString('zh-CN', {
        hour12: false,
        timeZone: 'Asia/Shanghai' // 设置为北京时间
      });
      tableDataTemp.value=tableData.value
      item.publish_time=formattedTime
    })
  }).catch((err) => {
    ElNotification({
      title: '获取招聘数据失败',
      type: 'warning',
    })
  })
}
const getResumes=()=>{
  axios.get('http://localhost:3000/resumes').then((res)=>{
    // ElNotification({
    //   title: '获取招聘数据成功',
    //   type: 'success',
    // })
    let temp=res.data.results
    resumeTableData.value=temp.filter(item=>{
      return item.job_id==nowJobId.value
    })
    resumeTableDataTemp.value=resumeTableData.value
  }).catch((err) => {
    ElNotification({
      title: '获取招聘数据失败',
      type: 'warning',
    })
  })
}
const send=()=>{
  newDStatus.value=0
  newDialogVisible.value=true
  newTips.value='招聘数据发布'
  newForm.value={}
}
const derSendJob=()=>{
  axios.post('http://localhost:3000/jobs',newForm.value).then((res)=>{
    ElNotification({
      title: '发布招聘数据成功',
      type: 'success',
    })
    newDialogVisible.value=false
    newForm.value={}
    getJobs()
  }).catch((err) => {
    ElNotification({
      title: '发布招聘数据失败',
      type: 'warning',
    })
  })
}
const cerSendJob=()=>{
  newDialogVisible.value=false
  newForm.value={}
}
const vieJob=(data)=>{
  interfaceType.value=1
  seacherPla.value='请输入简历编号'
  nowJobId.value=data.id
  getResumes()
}
const back=()=>{
  interfaceType.value=0
  seacherPla.value='请输入招聘数据编号'
}

const delJob=(data)=>{
  axios.delete(`http://localhost:3000/jobs/${data.id}`).then((res)=>{
    ElNotification({
      title: '删除成功',
      type: 'success',
    })
    getJobs()
  }).catch((err) => {
    ElNotification({
      title: '删除失败',
      type: 'warning',
    })
  })
}
const modJob=(data)=>{
  newForm.value=data
  newDialogVisible.value=true
  newTips.value='修改'
  newDStatus.value=2
}
const derModJob=()=>{
  axios.put(`http://localhost:3000/jobs/${newForm.value.id}`,newForm.value).then((res)=>{
    ElNotification({
      title: '修改成功',
      type: 'success',
    })
    newDStatus.value=0
    newDialogVisible.value=false
    getJobs()
  }).catch((err) => {
    ElNotification({
      title: '修改失败',
      type: 'warning',
    })
  })
}
const userLogin=(useraccount,userpassword)=>{
  axios.post('http://localhost:3000/login',{useraccount:useraccount,userpassword:userpassword}).then((res)=>{
    ElNotification({
      title: '登陆成功',
      type: 'success',
    })
    dialogVisible.value=false
    tips.value='用户'
    role.value=res.data.user.user_role
    username.value=res.data.user.user_account
    btnStatus.value=1
    form.value={}
    loginStatus.value=true
    getJobs()
  }).catch((err) => {
    ElNotification({
      title: '登陆失败',
      type: 'warning',
    })
  })
}
const userRegister=(useraccount,userpassword,userrole)=>{
  axios.post('http://localhost:3000/register',{useraccount:useraccount,userpassword:userpassword,userrole:userrole}).then((res)=>{
    ElNotification({
      title: '注册成功',
      type: 'success',
    })
    tips.value='登陆'
    btnStatus.value=0
    form.value={}
  }).catch((err) => {
    ElNotification({
      title: '注册失败',
      type: 'warning',
    })
    form.value={}
  })
}

const celReg=()=>{
  tips.value='登陆'
  username.value='未登陆'
  form.value={}
  btnStatus.value=0
}
const derReg=()=>{
  userRegister(form.value.useraccount,form.value.userpassword,form.value.userRole)
}
const out=()=>{
  tips.value='登陆'
  username.value='未登陆'
  dialogVisible.value=false
  form.value={}
  btnStatus.value=0
  tableData.value=[]
  tableDataTemp.value=[]
  loginStatus.value=false
}
const register=()=>{
  tips.value='注册'
  btnStatus.value=2
  form.value={}
}
const login=()=>{
  userLogin(form.value.useraccount,form.value.userpassword)
}
const clickUser=()=>{
  dialogVisible.value=true
}
onMounted(()=>{

})
</script>

<style scoped>
.overture{
  width: 100%;
  height: 100%;
}
.head{
  width: 100%;
  height: 6vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(50, 106, 238);
  color: white;
  .title{
    margin-left: 10px;
  }
  .user{
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 0.5%;
    color: white;
    cursor: pointer;
  }
}
.body{
  width: 100%;
  height: 94vh;
  display: flex;
  justify-content: center;
  .content{
    width: 99%;
    height:100%;
    .tool{
      margin-top: 10px;
      display: flex;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .img-box{
      width: 100%;
      height:100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .img{
        width: 100%;
        height: 100%;
        background-size: cover;
        background: url('../public/img.png');;
      }
      .img-text{
        position: absolute;
        background-color: white;
        border-radius: 5px;
        padding: 5%;
        font-size: 50px;
      }
    }
  }
}
</style>
